<template>
    <div id="myMain">
        <div class="myMain-padding displayFlexC">
            <div class="tenAccountList-top main-top">
                <vxe-button @click="exportDataEvent"><i class="vxe-icon--download"></i> 导出</vxe-button>
            </div>
            <div class="tenAccountList-top">
                <span style="float:left;line-height:40px;margin-right:10px;">全表搜索：</span>
                <el-input v-model="searchVal" placeholder="" @input="searchEvents" prefix-icon="el-icon-search"></el-input>
            </div>
            <vxe-table
            ref="xTable"
            :filter-config="{showIcon: false}"
            border
            stripe
            highlight-hover-row
            :loading="loading"
            :data="tableData"
            :export-config="{}"
            @checkbox-all="selectAllEvent"
            @checkbox-change="selectChangeEvent"
            row-id="id"
            :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
            :checkbox-config="{reserve: true}">
            <vxe-table-column type="checkbox" width="60"></vxe-table-column>
            <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
            <vxe-table-colgroup title="企业名称">
                <vxe-table-column field="fname" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                    <template #header="{ column }">
                        <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                    </template>
                </vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="企业法人">
                <vxe-table-column field="corp" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                    <template #header="{ column }">
                        <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                    </template>
                </vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="联系电话">
                <vxe-table-column field="phone" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                    <template #header="{ column }">
                        <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                    </template>
                </vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-column field="time" title="发起时间"></vxe-table-column>
            <vxe-table-column field="timeLimit" title="处理期限"></vxe-table-column>
            <vxe-table-column field="paStatus" title="处理状态">
                <template #default="{ row }">
                       <span v-if="row.paStatus == '已同意'" style="color:green;">{{ row.paStatus }}</span>
                       <span v-else-if="row.paStatus == '不同意'" style="color:red;">{{ row.paStatus}}</span>
                       <span v-else>{{ row.paStatus}}</span>
                </template>
            </vxe-table-column>
            <vxe-table-column title="操作" width="100">
                <template #default="{ row }">
                    <vxe-button type="text" icon="el-icon-bangzhu" title="审批" @click="toApproval(row)" class="my_success_btn" v-if="row.paStatus == '未审批'"></vxe-button>
                </template>
            </vxe-table-column>
            </vxe-table>
            <!-- 分页 -->
            <vxe-pager
            perfect
            size="mini"
            :current-page="tablePage.currentPage"
            :page-size="tablePage.pageSize"
            :page-sizes="tablePage.pageSizes"
            :total="tablePage.totalResult"
            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']">
            </vxe-pager>
        </div>
        <vxe-modal v-model="alertVal" title="企业入驻信息审核" width="35%">
            <template #default>
                <div class="displayFlexR" style="flex:1;position: relative;    padding-bottom: 50px;">
                    <div class="approval_details_left myMain-padding">
                        <el-form :inline="true" label-width="150px" :model="formData" class="demo-form-inline">
                            <div class="title baseBG">企业入驻信息</div>
                            <div class="line baseBG"></div>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="企业名称：">
                                        <el-input v-model="formData.fname" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="企业法人：">
                                        <el-input v-model="formData.corp" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="身份证：">
                                        <el-input v-model="formData.nid" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="联系方式：">
                                        <el-input v-model="formData.phone" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="房屋编号：">
                                        <el-input v-model="formData.houseNumber" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <div class="approval_details_right myMain-padding">
                        <p class="baseBG hh">当前处理人： {{username}}</p>
                        <el-radio-group v-model="checkList">
                            <el-radio label="同意"></el-radio>
                            <el-radio label="不同意"></el-radio>
                        </el-radio-group>
                        <p>处理意见：</p>
                        <el-input type="textarea" v-model="textarea" rows="3" placeholder="请输入处理意见"></el-input>
                        <p>处理流程：</p>
                        <el-timeline>
                            <el-timeline-item :timestamp="formData.time" placement="top">
                            <el-card>
                                <p>发起人： {{formData.corp}}</p>
                            </el-card>
                            </el-timeline-item>
                        </el-timeline>
                        <div class="btn">
                            <el-button class="baseBG" @click="searchEvent">确认</el-button>
                            <el-button @click="resetEvent">取消</el-button>
                        </div>
                    </div>
                </div>
            </template>
        </vxe-modal>
    </div>
</template>
<style lang="scss" scoped>
@import '../../../styles/all';
::v-deep.vxe-form .vxe-form--item:last-of-type{
  margin: 0 auto;
display: flow-root;
}
#myMain{
    .tenAccountList-top{
        margin-bottom: 20px;
        .vxe-button{
            margin-left: 10px;
        }
    }
    .approval_details_left{
        flex: 2;
        margin-right: 20px;
        .title{
            width: 92px;
            height: 30px;
            line-height: 20px;
            text-align: center;
            font-size: 18px;
            line-height: 30px;
        }
        .line{
            width: 100%;
            height: 5px;
            margin-bottom: 20px;
        }
    }
    .approval_details_right{
        flex: 1;
        p{
            text-align: left;
            line-height: 35px;
        }
        .hh{
            padding: 2% 4%;
            border-radius: 5px;
        }
        .el-radio-group{
            margin: 2vh 0;text-align: left;
        }
        ::v-deep.el-timeline-item__timestamp.is-top{
            text-align: left;
        }
        // 线的颜色
        ::v-deep.el-timeline-item__tail {
            border-left: 2px solid #28567f;
        }
        // 圆点颜色
        ::v-deep.el-timeline-item__node {
            background-color: #28567f;
        }
        .btn{
            position: absolute;
            right: 4%;
            bottom: 2%;
        }
    }
}
</style>
<script>
import { getSettleInApprovalInfoBypaStatus, putSettleInInfoByApproval } from '@/api/enterprise_Manage'
import XEUtils from 'xe-utils'
export default {
    props: {
    },
    components:{},
    data(){
        return{
            searchVal: '',
            loading: false,
            tableData: [],
            list: [
                { id: 10001, a: '企业入驻', b: '张建强', c: '2021-06-01', d: '李建', e:'2021-06-01', f:'2021-12-01', g:'未处理'},
                { id: 10001, a: '企业入驻', b: '张建强', c: '2021-06-01', d: '李建', e:'2021-06-01', f:'2021-12-01', g:'未处理'},
            ],
            // 分页
            tablePage: {
                currentPage: 1,
                pageSize: 15,
                pageSizes: [15, 30, 45, 60],
                totalResult: 0
            },
            checkedBoxList: [],
            // 审批弹窗
            alertVal: false,
            textarea: '',
            checkList: [],
            formData: {
            },
            userID: null,
            username:null,
            rowId:null
        }
    },
    methods:{
        getUserInfo(){
            this.$store.dispatch('user/getInfo').then(res => {
                console.log('user info', res)
                this.userID = res.user.id
                this.username = res.user.nickname
            })
        },
        // 初始化
        async init(page, limit){
            let result = []
            await getSettleInApprovalInfoBypaStatus(page, limit, 0).then(res => {
                console.log('企业入驻审批信息', res)
                result = JSON.parse(JSON.stringify(res.data))
            })
            for(let i=0;i<result.length;i++){
                if(result[i]['paStatus'] == 0){
                    result[i]['paStatus'] = '未审批'
                }else if(result[i]['paStatus'] == 1){
                    result[i]['paStatus'] = '已同意'
                }else{
                    result[i]['paStatus'] = '不同意'
                }
            }
            this.list = result
            this.tablePage.totalResult = result.length
            this.tableData = result
        },
        selectAllEvent ({ checked, records }) {
            this.checkedBoxList = records
            // 全选
            console.log(checked ? '所有勾选事件' : '所有取消事件', records)
        },
        selectChangeEvent ({ checked, records }) {
            this.checkedBoxList = records
            // 单选个
            console.log(checked ? '勾选事件' : '取消事件', records)
        },
        // 导出
        exportDataEvent () {
            this.$refs.xTable.openExport({
                // 默认勾选源
                original: true
            })
        },
        // 搜索
        searchEvents () {
            console.log(this.searchVal)
            const filterVal = XEUtils.toValueString(this.searchVal).trim().toLowerCase()
            const filterRE = new RegExp(filterVal, 'gi')
            const searchProps = ['type', 'corp', 'phone', 'time', 'timeLimit', 'checkStatus']
            const rest = this.list.filter(item => searchProps.some(key => XEUtils.toValueString(item[key]).toLowerCase().indexOf(filterVal) > -1))
            this.tableData = rest.map(row => {
                const item = Object.assign({}, row)
                searchProps.forEach(key => {
                item[key] = XEUtils.toValueString(item[key]).replace(filterRE, match => `${match}`)
                })
                return item
            })
        },
        // 表内查找
        customStringFilterMethod ({ option, row, column }) {
            if (option.data) {
            return XEUtils.toValueString(row[column.property]).toLowerCase().indexOf((option.data).toLowerCase()) > -1
            }
            return true
        },
        filterEvent (option) {
            const xTable = this.$refs.xTable
            // 设置为选中状态
            option.checked = true
            // 修改条件之后，需要手动调用 updateData 处理表格数据
            xTable.updateData()
        },
        // 审批
        toApproval(data){ 
            this.$confirm('是否审批该条信息？', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.formData = data
                this.rowId = data.id
                this.alertVal = true
            })
        },
        searchEvent(){
            if(this.checkList != ''){
                let result = {}
                if(this.checkList == '不同意'){
                    result['paStatus'] = 2
                }else{
                    result['paStatus'] = 1
                }
                result['email'] = this.formData.email
                result['fname'] = this.formData.fname
                result['fid'] = this.formData.fid
                result['parkId'] = this.formData.parkId
                result['hid'] = this.formData.hid
                result['id'] = this.rowId
                result['cid'] = this.userID
                result['opinion'] = this.textarea
                putSettleInInfoByApproval(result).then(res => {
                    console.log('approval res', res)
                    this.alertVal = false
                    this.init(this.tablePage.currentPage, this.tablePage.pageSize)
                })
            }else{
                this.$message.error('请选择同意或者不同意！');
            }
            
        },
        resetEvent(){
            this.alertVal = false
        }
    },
    created(){},
    mounted(){
        this.getUserInfo()
        this.init(this.tablePage.currentPage, this.tablePage.pageSize)
    },
}
</script>